﻿@model Tau.ViewModels.ImageList
		
    <style type="text/css" media="screen">
	    ul li { display: inline; }
    </style>
	
    @if (Model != null)
    {
        var galleryColumns = 4;
        var currentColumn = 1;
    
        <table class="gallery clearfix">
            <tr>

            @foreach (var image in Model.Images)
            {
                if (currentColumn > galleryColumns)
                {
                    @:</tr><tr>
                    { currentColumn = 1; }
                }

                <td>
                    <a onclick="popupImage(@image.ImageId, '@image.FileName');" href="#" style="cursor:pointer" title="@image.FileName">
                        <img src="@Url.Action("GetImage", new { id = image.ImageId, type = "thumbnail" })" alt="@image.FileName" />
                    </a>
            
                    <br />

                    @if (Model.Mode == Tau.ViewModels.DisplayMode.Edit)
                    {
                        @Ajax.ActionLink("delete", "Delete", new { id = image.ImageId, mode = Model.Mode },
                                    new AjaxOptions
                                    {
                                        Confirm = string.Format("Are you sure you want to delete \"{0}\"?", image.FileName),
                                        UpdateTargetId = "imageList"
                                    })
                    }
                    else
                    {
                        <a href="#">insert</a>
                    }
                </td>
            
                { currentColumn++; }
            }

           </tr>
        </table>
        
        <div id="imagePopup" title="Full Size Image View" style="display:none"></div>
    }
   
    <script type="text/javascript" charset="utf-8">
        function popupImage(imageId, fileName) {

            var imagePopup = $("#imagePopup");

            var urlAction = '@Url.Action("GetImage", "Image")';

            
            urlAction = urlAction + "/" + imageId + "/large";

           
            imagePopup.load(urlAction, function () {

                $("#imagePopup").dialog({
                    autoOpen: true,
                    height: 400,
                    width: 620,
                    modal: true,
                    buttons: {
                        "Close": function () {
                            $(this).dialog("close");
                        }
                    }
                });
        });
    }
        
    </script>